<template>
  <div id="app">
        <div> 
          <ul>
            <li>欢迎光临_vue开发的收银_水果店</li>
            <li>苹果10￥/斤,折扣《 8折》</li>
            <li>请输入你要购买的斤数 <input v-model="value"  type="text"></li>
            <li><button @click="money" >结账买单</button></li>
            <li>结账单:总价:{{list.sum}}  ￥元 折后价:{{list.price}} ￥元 省了:{{list.residue}}  ￥元</li>
          </ul>
       </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      value:'',
      list:{
        sum:'',
        price:'',
        residue:''
      }
    }
  },
  methods:{
    money(){
        this.list.sum=this.value*10
        this.list.price=this.value*8
        this.list.residue=this.value*2

    }
  }
}
</script>

<style>
ul{
 
  margin: 0 auto;
}
ul li{
  list-style: none;
  line-height: 50px;
  height: 50px;
  width: 100%;
  border: 1px solid;
  text-align: center;
}

</style>
